<!DOCTYPE html>
<html>
<body>
<img class="js_lazy_img" src="" original-src="./imgs/azusa.jpg">
<img class="js_lazy_img" src="" original-src="imgs/azusa.jpg">
<img class="js_lazy_img" src="" original-src="imgs/azusa.jpg">
<img class="js_lazy_img" src="" original-src="imgs/azusa.jpg">
<img class="js_lazy_img" src="" original-src="imgs/azusa.jpg">
<img class="js_lazy_img" src="" original-src="imgs/azusa.jpg">
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 var images = $('img.js_lazy_img'); 
 images.each(function(){
   var _this = $(this);
   var img = $('<img>');
   /*download original imges*/
   //create an imge object to make browser download images 
   img.attr('scr', _this.attr('original-src'));
    
   //destroy this imge
   img = null;
    
   _this.attr('src','imgs/azusa.jpg'); //default imge
   _this.bind('load', function(e){
     _this.attr('src', _this.attr('original-src'));
     _this.removeAttr('original-src');
     _this.removeClass('js_lazy_img');
   })
 });
</script>
</body>
</html>